<template>
  <div class="dashboard-container">
    <el-row :gutter="12">
      <el-col>
        <el-card shadow="always" class="card">
          <div class="dashboard-title">
            <div class="qgj">欢迎使用企管家！</div>
            <div>公司名称 : {{ profile.company }}</div>
            <div>到期时间 : {{ moment(profile.qgjdqrq).format('YYYY-MM-DD') }}</div>
            <div>当前账号 : {{ profile.username }} - {{ profile.nickname }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin: 5px"></div>
    <el-row>
      <el-col :span="15">
        <el-card shadow="always" style="height: 100%">
          <el-calendar v-model="value" />
        </el-card>
      </el-col>

      <el-col :span="8" :offset="1">
        <div class="used">
          <div class="top">
            <el-card shadow="always" style="width: 100%; height: 100%">
              <ps-user />
            </el-card>
          </div>
          <div class="bottom">
            <el-card shadow="always" style="width: 100%; height: 100%">
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="常用模块" name="first">
                  <div class="grid" v-if="menuList.length > 0">
                    <div class="grid-item" v-for="item in menuList" :key="item.path" @click="nav(item.path)">
                      <div class="icon" :style="{ backgroundColor: item.color }">
                        {{ sliceFirst(item.title) }}
                      </div>
                      <div class="desc ps_text_ellipsis">{{ item.title }}</div>
                    </div>
                  </div>

                  <el-empty description="暂无记录" v-else />
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { userStore } from '@/pinia/user'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import moment from 'moment'
const value = ref(new Date())
const { profile, used } = storeToRefs(userStore())
const activeName = ref('first')
const router = useRouter()

const width = computed(() => {
  return window.innerWidth
})
const height = computed(() => {
  return window.innerHeight
})

const fontSize = ref('')

const fontSizeFn = type => {
  nextTick(() => {
    if (type === '+') {
      document.querySelector('html').style.fontSize = parseInt(fontSize.value) + 1 + 'px'
    } else {
      document.querySelector('html').style.fontSize = parseInt(fontSize.value) - 1 + 'px'
    }
    document.querySelector('html').style.fontSize = '8px'
    fontSize.value = document.querySelector('html').style.fontSize
  })
}

/**
 * @description: 通过筛选得到常用模块数据，筛选条件：使用次数大于20、使用次数排名前10
 * @param {*} computed
 * @return {*}
 */
const menuList = computed(() => {
  const list = used.value
    .sort((a, b) => {
      return b.count - a.count
    })

    .slice(0, 10)

  // .filter(item => item.count > 20)
  return list
})

/**
 * @description: 只截取第一个元素
 * @param {*} str
 * @return {*}
 */
const sliceFirst = str => {
  return str.charAt(0)
}

/**
 * @description: 导航的某一个界面
 * @param {*} path
 * @return {*}
 */
const nav = path => {
  path && router.push(path)
}

onMounted(() => {
  fontSize.value = document.querySelector('html').style.fontSize
})
</script>

<style scoped lang="scss">
.dashboard-container {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  // overflow: hidden;
  box-sizing: border-box;
  position: relative;

  .card {
    height: 150px;
    border-radius: 15px;
    background-color: #409eff;
    color: #fff;
  }

  .dashboard-title {
    display: flex;
    flex-direction: column;
    .qgj {
      font-size: 22px;
      line-height: 50px;
    }
  }

  .used {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    color: #fff;

    .top {
      flex: 5;
      // background-color: #409eff;
      border-radius: 4px;

      .company {
        text-align: center;
        padding-top: 15px;
        font-size: 24px;
        font-weight: bold;
      }

      .company_link {
        display: flex;
        justify-content: center;
        margin-top: 5px;

        .link {
          color: #fff;
          text-decoration: none;
          border: 1px solid #fff;
          padding: 5px 10px;
          border-radius: 4px;
        }
      }

      .chidg {
        width: 100%;
        display: flex;
        justify-content: center;

        img {
          margin-top: 50px;
          width: 300px;
        }
      }
    }

    .bottom {
      flex: 5;
      margin-top: 10px;
      width: 100%;
      height: 100%;

      .demo-tabs {
        .grid {
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-columns: repeat(5, 20%);
          grid-template-rows: repeat(2, 50%);

          .grid-item {
            height: 120px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            cursor: pointer;

            .icon {
              width: 50px;
              height: 50px;
              text-align: center;
              line-height: 50px;
              border-radius: 50%;
              font-size: 20px;
              color: #fff;
              transition: all 0.3s;
            }

            .desc {
              width: 100%;
              text-align: center;
            }

            &:hover {
              .icon {
                background-color: #409eff !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>
